<template>
	<view>
		<uni-nav-bar :statusBar="true" @clickRight="openAdd">
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			<view class="nav-tab-bar f_center">
				<block v-for="(item,idx) in tabBars">
					<view :class="{'active': idx===tabIndex}" @tap="changeTab(idx)">
						<text>{{item.name}}</text>
						<view class="nav-tab-bar-line" v-if="idx===tabIndex"></view>
					</view>
				</block>
			</view>
			<block slot="right">
				<view class="nav-right f_center">
					<view class="icon iconfont icon-bianji1"></view>
				</view>				
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue';
	export default{
		components:{
			uniNavBar
		},
		props:{
			tabBars: Array,
			tabIndex: Number
		},
		methods: {
			openAdd(){
				uni.navigateTo({
					url: '../add-input/add-input'
				})
			},
			changeTab(idx){
				this.$emit('changeTab',idx)
			}
		}
	}
</script>

<style scoped>
	.nav-left{
		margin-left: 24upx;
	}
	.nav-left>view, .nav-right>view{
		font-size: 20px;
	}
	.nav-right{
		width: 100%;
	}
	.nav-tab-bar{
		margin-left: -20upx;
	}
	.nav-tab-bar>view{
		padding: 0 20upx;
		position: relative;
	}
	.nav-left>.icon-qiandao{
		color: #FF9619;
	}
	.nav-tab-bar-line{
		border-top: 5upx solid #FEDE33;
		border-bottom: 5upx solid #FEDE33;
		border-radius: 20upx;
		background-color: #FEDE33;
		position: absolute;
		top: 44upx;
		width: 60upx;
	}
	.nav-tab-bar>.active{
		color: #333;
		font-weight: 700;
	}
</style>
